<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <el-row>
          <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
          <span v-html="Data.Title" style="display:inline-block"></span>
          <el-button
            @click="divvisibility(1)"
            type="text"
            style="float:right"
            v-if="!preview"
          >{{see}}</el-button>
        </el-row>

        <div v-if="visible">
          <el-button type="text" @click="lixian=!lixian">离线模式</el-button>

          <div class="option-area" style="margin: 5px;" v-if="!lixian">
            <el-alert v-if="HasError" title="比重总值已经超出设置!" type="error" effect="dark"></el-alert>
            <span v-if="(Data.TotalValue-AssignedValue)!=0">未分配{{Data.TotalValue-AssignedValue}}</span>
            <el-table :data="Data.Options" style="width: 100%">
              <el-table-column prop="itemName" label="选项"/>
              <el-table-column label="比重">
                <template slot-scope="scope">
                  <table style="width:100%">
                    <tr>
                      <td>
                        <el-slider
                          show-input
                          style="margin-left:10px"
                          @change="assignValue(scope.row.itemId)"
                          :max="Data.TotalValue"
                          input-size="mini"
                          v-model="scope.row.ItemValue"
                        ></el-slider>
                      </td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 离线表格模式-->
          <div v-if="lixian">
            <table border="1px" cellspacing="0" v-if="type" style="width: 50%">
              <!-- 一列 -->
              <tr v-for="(opt,index) in Data.Options" :key="opt.itemName">
                <td style="width: 70%">{{opt.itemName}}</td>
                <td style="width: 30%">{{index+1}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div id="editor" v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title" :Html="Data.Title"/>
        <table class="setting-table">
          <tr>
            <td>
              <el-input placeholder="请输入内容" v-model="Data.TotalValue">
                <template slot="prepend">比重总值</template>
              </el-input>
            </td>
            <td>
              <el-input placeholder="请输入内容" v-model="Data.Unit">
                <template slot="prepend">比重单位</template>
              </el-input>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>

        <el-table :fit="true" :data="Data.Options" style="width: 100%">
          <el-table-column label="选项文字">
            <template slot-scope="scope">
              <div id="title-row">
                <el-input
                  size="small"
                  style="display: inline-block;"
                  v-model="scope.row.itemName"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: inline-block;margin-top: 5px;">
                <el-button
                  type="warning"
                  @click="remove(scope.row.itemId)"
                  size="mini"
                  style="display: inline-block;"
                  icon="el-icon-minus"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  @click="insert(scope.row.itemId)"
                  size="mini"
                  style="display: inline-block;"
                  icon="el-icon-plus"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  style="display: inline-block;"
                  @click="moveUp(scope.row.itemId)"
                  icon="el-icon-top"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  style="display: inline-block;"
                  @click="moveDown(scope.row.itemId)"
                  icon="el-icon-bottom"
                  circle
                ></el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="说明">
            <template slot-scope="scope">
              <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import ProportionSubject, { ProportionOption } from "./ts/ProportionSubject";

import TBaseQuestion from "./ts/TBaseQuestion";

import EditorComponent from "./EditorComponent.vue";

import BatchAddComponent from "./BatchAddComponent.vue";
import { QuestionTypes } from "./ts/QuestionDataTypes";
@Component({
  components: { EditorComponent, BatchAddComponent }
})

//比重分配题组件
export default class ProportionComponent extends TBaseQuestion<
  ProportionOption,
  ProportionSubject
> {
    
  $name: string = "ProportionComponent";

  CheckedValues: Array<string> = [];
  //已分配值
  AssignedValue: number = 0;
  HasError: boolean = false;
  QuestionType = 0;
  itemname = "";

  lixian = false;
  type = true;

  options: ProportionOption[] = [];
  msg: string = "";
  gotMsg: string[] = [];

  @Watch("msg")
  getstr() {
    console.log(this.msg);
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        var opt = new ProportionOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }
  itemNameArry() {
    this.itemname = this.getOptionText();
  }

  getOptionText(): string {
    let options = "";
    let n = this.Data.Options.length;
    for (let i = 0; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }
  constructor() {
    super(ProportionOption, ProportionSubject);
    this.Data.QuestionType = QuestionTypes.qtProportion;
    this.Data.Title = "设置题目标题";

    for (var i: number = 0; i < 5; ++i) {
      var opt = new ProportionOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  mounted() {
    super.mounted();
    this.initProps();
    console.info("component mounted!");
  }
  //分配值
  assignValue(id: string) {
    var index = this.Data.Options.findIndex(item => item.itemId === id);
    var item = this.Data.Options[index];
    this.AssignedValue = 0;
    for (var lt of this.Data.Options) {
      this.AssignedValue += lt.ItemValue;
    }

    console.info(
      "assigned value:" + this.AssignedValue + " itemValue:" + item.ItemValue
    );
    if (this.AssignedValue > this.Data.TotalValue) {
      //item.ItemValue=0;
      // item.ItemValue=0;
      this.Data.Options[index].ItemValue = 0;
      this.AssignedValue = this.Data.TotalValue;

      this.HasError = true;
    } else {
      this.HasError = false;
    }
  }

  //输入框内容改变
  inputchange() {
    this.msg = this.getOptionText();
  }
  //删除选项
  remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }
  //插入选项
  insert(id: string): void {
    let options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(ProportionOption)
    );
    this.msg = this.getOptionText();
  }
  //向上移动选项
  moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }

  initOptions() {
    for (var i: number = 0; i < 5; ++i) {
      var opt = new ProportionOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  getMaxSel(): number {
    return this.Data.Options.length;
  }

  setTitle(txt: string): void {}

  GetHtml(html: string): void {
    this.Data.Title = html;
  }
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;

  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}
</style>
